const path = require("path")
const { DefinePlugin } = require("webpack")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const CopyWebpackPlugin = require("copy-webpack-plugin")

module.exports = {
  mode: "development",
  entry: "./src/index.js", // 可以使用相对路径
  output: {
    filename: "js/bundle.js",
    // path不能使用相对路径，__dirname是当前绝对路径
    path: path.resolve(__dirname, "./dist"), 
    // assetModuleFilename: "img/[name]-[hash:8][ext]" // 配置所有asset module type资源的输出路径
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              importLoaders: 1,
              // 在css-loader之前有多少loader应用于@import
              // 0 => no loaders (default);
              // 1 => postcss-loader;
              // 2 => postcss-loader, sass-loader
            }
          },
          "postcss-loader"
          // {
          //   loader: "postcss-loader",
          //   options: {
          //     postcssOptions: {
          //       plugins: [
          //         require('postcss-preset-env'),
          //         // "postcss-preset-env" // 简写（并不是所有插件都可以简写：require时需要传参数的插件）
          //       ]
          //     }
          //   }
          // }
        ]
      },
      {
        test: /\.less$/,
        use: [
          "style-loader",
          "css-loader",
          "postcss-loader",
          "less-loader"
        ]
      },
      // {
      //   test: /\.jpeg$/,
      //   use: [ 
      //     {
      //       loader: "file-loader",
      //       options: {
      //         // name: "[hash:5]-[name].[ext]",
      //         // outputPath: 'img',
      //         name: "img/[hash:5]-[name].[ext]",
      //         esModule: false,
      //       },
      //     }
      //   ],
      //   type: "javascript/auto"
      // }
      {
        test: /\.jpeg$/,
        // type: "asset/resource", // file-loader
        type: "asset", // url-loader
        generator: {
          filename: "img/[name]-[hash:10][ext]"
        },
        parser: {
          dataUrlCondition: {
            maxSize: 20 * 1024 // 单位kB
          }
        }
      },
      {
        test: /\.(svg|ttf|eot|woff|woff2)$/,
        type: "asset/resource",
        generator: {
          filename: "font/[name]-[hash:10][ext]"
        },
        // loader: "url-loader?limit=8192&esModule=false&name=fonts/[name]" + (isDev ? "" : ".[hash:7]") + ".[ext]",
      },
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: 'learn webpack',
      template: './public/index.ejs',
    }),
    new DefinePlugin({
      BASE_URL: "'./'"
    }),
    new CopyWebpackPlugin({
      patterns: [
        {
          from: "public",
          globOptions: {
            ignore: [
              // **表示public文件夹
              "**/index.ejs",
              "**/.DS_Store"
            ]
          }
        }
      ]
    })
  ]
}